<template>
  <div class="header" @mouseleave="closeUserList">
    <div class="log">
      <icon-font type="icon-wangyiyunyinle"/>
    </div>
    <div class="bars">
      <TBar v-model='barValue' />
      <div class="bar_select">
        <TInput />
      </div>
      <div  class="header_button">
        <TButton content="Bye~" type="info" @click="exit" />
      </div>
    </div>
    <div class="header_img" @mousemove="openUserList" @click="goHome">
      <img :src="avaImg" alt="点我查看个人资料" />
      <span>{{ nickName }}</span>
    </div>
    <div class="user_list" v-show="isShowUserList">
      <ul>
        <li v-for="index in userList" @click="goUserList(index)">{{ index }}</li>
      </ul>
    </div>
  </div>
  <div class="player">
    <TPlay :URL="song" />
  </div>
</template>

<script lang="ts" setup>
import { IconFont } from '@/base-ui/Icons/index'
import TButton from '@/base-ui/TButton/src/TButton.vue';
import { ref, computed,watch } from 'vue'
import TPlay from '@/base-ui/TPlay/src/TPlay.vue';
import TInput from '@/base-ui/TSelect - 副本/src/TSelect.vue'
import TBar from '@/base-ui/TBar/src/TBar.vue'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'
import  localCache  from '@/utils/cache'

const router = useRouter()
const store = useStore()

const nickName = computed(() => store.state.login.userInfo.nickname)
const avaImg = computed(() => store.state.login.userInfo.avatarUrl)

const isShowUserList = ref(false)
const userList = ref(
  [
    "个人主页",
    "我的消息",
    "我的等级",
    "vip会员",
    "个人设置",
  ])

const openUserList = () => {
  isShowUserList.value = true

}

const closeUserList = () => {
  isShowUserList.value = false
}

const goHome = () => {
  router.push('/main')
}

const goUserList = (path: string) => {
  switch (path) {
    case '个人主页':
      router.push('/user/home')
      break;
    case '我的消息':
      router.push('/user/message')
      break;
    case '我的等级':
      router.push('/user/level')
      break;
    case 'vip会员':
      router.push('/user/vip')
      break;
    case '个人设置':
      router.push('/user/setting')
      break;
  }
}

const song = ref('')

const barValue = ref('')
watch(barValue,(newVal)=>{
router.push(`/${newVal}`)
})


const exit =()=>{
  localCache.deleteCache('token')
  window.location.reload()
}

</script>
<style lang="less" scoped>
.bars {
  margin-right: 700px;
}
.header {
  border-bottom: 5px rgb(204, 89, 7) solid;
  width: 100%;
  height: 80px;
  background-color: @greyLight-1;
  display: flex;
  justify-content: space-between;
}
.log {
  font-size: 150px;
  margin: -90px 100px;
}
.header_img {
  position: relative;
  cursor: pointer;
  margin-right: 30px;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 7px -160px;
  }
  span {
    text-align: left;
    display: block;
    margin-top: -8px;
    margin-left: -175px;
  }
}
.user_list {
  box-shadow: 0.3rem 0.3rem 0.6rem @greyLight-2, -0.2rem -0.2rem 0.5rem @white;
  border-radius: 1rem;
  // background-color: @white;
  width: 120px;
  height: 200px;
  margin-top: 0px;
  margin-left: 1780px;
  position: absolute;
  ul {
    margin-top: 12px;
    padding-top: 10px;
  }
  li {
    padding: 3px;
    margin-top: 5px;
    margin-left: -10px;
    height: 25px;
    font-size: 13px;
    font-weight: 550;
    // align-items: center;
    cursor: pointer;
    line-height: 20px;
    // box-shadow: inset 0.2rem 0.2rem 0.5rem @greyLight-2,
    // inset -0.2rem -0.2rem 0.5rem @white;
    background: none;
    transition: margin-left 0.5s;
    &:hover {
      margin-left: 0;
      width: 80px;
      outline: none;
      font-size: 14px;
      text-align: center;
      font-weight: 750;
      border-radius: 8%;
      // background-color: black;
      box-shadow: 0.3rem 0.3rem 0.6rem @greyLight-2,
        -0.2rem -0.2rem 0.5rem @white;
    }
  }
}
.bar_select {
  position: fixed;
  margin-top: -80px;
  margin-left: 350px;
}

//  播放器
.player {
  display: block;
  position: absolute;
  // z-index: 5;
  width: 100%;
  margin: 800px 0 0 0px;
}

// 退出
.header_button{
  margin-top: -75px;
  margin-right: -450px;
  padding-left: 260px;
}
</style>
